<template>
	<view class="no-user-select page-body">
		<el-row class="login-card">
			<el-col :span="12" class="login-page-right">
				<view class="pic">
					<image src="../../static/images/login-school.svg" mode="widthFix"></image>
				</view>
				<view class="title">
					<view>uce知识付费管理平台</view>
				</view>
			</el-col>
			<el-col :span="12">
				<view class="login-view">
					<text class="login-title">{{ $t('login.welcome') }}</text>

					<el-form :model="form1" status-icon :rules="rules" ref="rule1" label-width="60px" class="form-view">
						<el-form-item :label="$t('login.account')" prop="pass" class="form-item">
							<el-input class="input" type="text" v-model="form1.username"></el-input>
						</el-form-item>
						<el-form-item :label="$t('login.password')" prop="checkPass" class="form-item">
							<el-input class="input" type="password" v-model="form1.password" show-password
								maxlength="20"></el-input>
						</el-form-item>
						<view class="password-box">
							<view class="remember-password">
								<el-checkbox v-model="checked">
									<text class="tips" style="font-size: 12px;">{{ $t('login.remember') }}</text>
								</el-checkbox>
							</view>
							<view class="forget-password">
								<text @click="forgetPassWord()" style="font-size: 12px;">忘记密码</text>
							</view>
						</view>
						<el-button class="login_but" type="primary" @click="submit">{{ $t('login.login') }}</el-button>
					</el-form>
				</view>
			</el-col>
		</el-row>

		<vue-particles class="login-bg" color="#00ffff" :particleOpacity="0.7" :particlesNumber="100" shapeType="circle"
			:particleSize="4" linesColor="#aaffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4"
			:linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="false">
		</vue-particles>
		<vk-data-dialog v-model="form2.props.show" :title="form2.props.title" width="580px" top="4vh" mode="form">
			<vk-data-form ref="form2" v-model="form2.data" :rules="form2.props.rules" :action="form2.props.action"
				:form-type="form2.props.formType" :columns='form2.props.columns' label-width="100px" max-height="700px"
				@success="success"></vk-data-form>
		</vk-data-dialog>

	</view>
</template>

<script>
	var that // 当前页面对象
	var vk = uni.vk // vk实例
	var originalForms = {}; // 表单初始化数据

	import config from '@/app.config.js'
	export default {
		data() {
			return {
				...config.staticUrl.navBar,
				...config.copyright,
				form1: {
					username: '',
					password: '',
					needPermission: true
				},
				checked: false,
				rules: {},
				form2: {
					// 表单请求数据，此处可以设置默认值
					data: {
						gender: 0,
						login_appid_type: 1,
						allow_login_background:true,
						is_invoicing: 1,
						role: ['customer']
					},
					// 表单属性
					props: {
						// 表单请求地址
						action: "",
						// 表单字段显示规则
						columns: [{
								key: "username",
								title: "用户账号",
								type: "text",
								show: ["add"]
							},
							{
								key: "password",
								title: "密码",
								type: "text",
								show: ["add"]
							},
							{
								key: "nickname",
								title: "公司名称",
								type: "text"
							},
							{
								key: "contacts_name",
								title: "联系人",
								type: "text"
							},
							{
								key: "contacts_phone",
								title: "联系电话",
								type: "text"
							},
							{
								key: "is_invoicing",
								title: "是否开票",
								type: "radio",
								optionType: "button",
								data: [{
										value: 1,
										label: "开票"
									},
									{
										value: 0,
										label: "不开票"
									}
								]
							},
							// {
							// 	key: "sale_user_id",
							// 	title: "所属销售员",
							// 	type: "remote-select",
							// 	placeholder: "请输入所属销售员",
							// 	props: {
							// 		list: "rows",
							// 		value: "_id",
							// 		label: "nickname"
							// 	},
							// 	action: "admin/system/user/sys/getListSale",
							// 	actionData: function() {
							// 		return {
							// 			sale_user_id: that.form1.data.sale_user_id
							// 		}
							// 	}
							// },
							// {
							// 	key: "service_user_id",
							// 	title: "所属客服",
							// 	type: "remote-select",
							// 	props: {
							// 		list: "rows",
							// 		value: "_id",
							// 		label: "nickname"
							// 	},
							// 	placeholder: "请输入所属客服",
							// 	action: "admin/system/user/sys/getListCustomerService",
							// 	actionData: function() {
							// 		return {
							// 			service_user_id: that.form1.data.service_user_id
							// 		}
							// 	}
							// },
							{
								key: "address",
								title: "所属地址",
								type: "text"
							},


							{
								key: "comment",
								title: "备注",
								type: "textarea",
								maxlength: "99",
								showWordLimit: true,
								autosize: {
									minRows: 2,
									maxRows: 10
								},
							},
						],
						// 表单对应的验证规则
						rules: {
							username: [{
								required: true,
								validator: vk.pubfn.validator("username"),
								message: '用编号以字母开头，长度在6~18之间，只能包含字母、数字和下划线',
								trigger: 'blur'
							}],
							nickname: [{
								required: true,
								message: '公司名称为必填字段',
								trigger: 'blur'
							}],
							contacts_name: [{
								required: true,
								message: '请输入联系人',
								trigger: 'blur'
							}],
							contacts_phone: [{
								required: true,
								message: '请输入联系电话',
								trigger: 'blur'
							}, {
								validator: vk.pubfn.validator("mobile"),
								message: '手机号格式错误',
								trigger: 'blur'
							}],
							password: [{
								required: true,
								validator: vk.pubfn.validator("password"),
								message: '密码长度在6~18之间，只能包含字母、数字和下划线',
								trigger: 'blur'
							}],


						},
						// add 代表添加 update 代表修改
						formType: '',
						// 是否显示表单1 的弹窗
						show: false,
					}
				},
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this
			vk = that.vk
			that.options = options
			that.init(options)
		},
		// 监听 - 页面创建时
		created() {
			that = this
			vk = that.vk
		},
		mounted() {},
		methods: {
			success() {
				this.form2.props.show = false
				vk.toast('注册成功', 'none');
			},
			addBtn() {
				that.resetForm();
				that.form2.props.action = 'admin/system/user/pub/addUser';
				that.form2.props.formType = 'add';
				that.form2.props.title = '注册';
				that.form2.props.show = true;
			},
			resetForm() {
				vk.pubfn.resetForm(originalForms, that);
			},

			// 页面初始化
			init() {
				originalForms["form2"] = vk.pubfn.copyObject(that.form2);
				let {
					login
				} = vk.getVuex('$user')
				if (vk.pubfn.isNotNull(login)) {
					that.form1.username = login.username
					that.form1.password = login.password
					that.checked = true
				}
				if (!getApp().isAllowLoginBackground()) {
					return false
				}
				// 执行以下函数,主要是为了使云函数提前热启动
				vk.userCenter.checkToken({
					loading: true,
					success: function(data) {
						that.login_success()
					}
				})
			},
			// 表单提交
			submit() {
				vk.userCenter.login({
					data: that.form1,
					success: data => {
						if (!getApp().isAllowLoginBackground(data.userInfo)) {
							vk.alert('您的账户无登陆权限')
							return false
						}
						if (that.checked) {
							// 账号密码保存本地缓存
							vk.setVuex('$user.login.username', that.form1.username)
							vk.setVuex('$user.login.password', that.form1.password)
						}
						that.login_success(data)
					}
				})
			},
			//登陆成功
			login_success(data) {
				// 跳转到首页,或页面返回
				getApp().init()
				var pages = getCurrentPages()
				if (pages.length >= 2 && pages[pages.length - 2] && pages[pages.length - 2].route && pages[pages.length -
						2].route.indexOf('login/index') == -1) {
					vk.reLaunch('/' + pages[pages.length - 2].route)
				} else {
					// 进入首页
					console.log(data)
					if (data.userInfo.role[0] == 'customer') {
						vk.reLaunch('/pages_plugs/order/list')
					} else {
						vk.reLaunch('/pages/index/index')
					}

				}
			},
			forgetPassWord() {
				console.log(`忘记密码了`)
				vk.toast('暂不支持', 'none')
			},
			shortMessageLogin() {
				console.log(`短信登录`)
				vk.toast('暂不支持', 'none')
			},
			noCccount() {
				console.log(`没有账号`)
				vk.toast('暂不支持', 'none')
			},
			register() {
				console.log(`立即注册`)
				vk.toast('暂不支持注册', 'none')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-bottom {
		width: 100%;
		position: fixed;
		bottom: 40px;
		color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 0 60px;
		box-sizing: border-box;
		align-items: center;

		.left {
			text-align: right;
		}

		.middle {
			text-align: center;
			letter-spacing: 6px;
			flex: 1;
		}
	}

	.page-body {
		width: 100%;
		height: 100vh;
		padding: 0 !important;
		margin: 0;
		background: rgb(214, 233, 255);
		background: #46d0e7 url(../../static/bg.77d678be.jpg) no-repeat fixed center center;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: fixed;
		left: 0;

		.login-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
		}

		.login-card {
			width: 900px;
			z-index: 99;
		}

		.login-page-right {
			min-height: 100%;
			flex: 1;
			border-radius: 20rpx 0px 0px 20rpx;
			position: relative;
			color: #fff;
			background-color: rgba(58, 98, 215, 0.4);

			.pic {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 120px;

				image {
					width: 90%;
				}
			}

			.title {
				box-sizing: inherit;
				width: 100%;
				margin-top: 20px;
				text-align: center;
				color: #ffffff;
				font-weight: bold;
				font-size: 28px;
				padding: 20px;
				letter-spacing: 4px;

				view {
					span {
						opacity: 0;
					}
				}
			}

			.copyright {
				box-sizing: inherit;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				text-align: center;
				color: #ffffff;
				line-height: 1.5;
				padding: 10px;
			}
		}

		.login-view:hover {
			background-color: rgba(255, 255, 255, 1);
		}

		.login-view {
			border-radius: 0rpx 20rpx 20rpx 0rpx;
			width: 100%;
			background-color: rgba(255, 255, 255, 0.97);
			padding: 120px 30px;
			box-sizing: border-box;
			border: 1px solid #f5f5f5;
			box-shadow: 0px 0px 5px 0px #f5f5f5;

			/deep/ .input .el-input__inner {
				border: 0 !important;
				background-color: rgba(255, 255, 255, 0);
			}

			.image {
				display: block;
				width: 64px;
				height: 64px;
				margin: 0 auto;
				margin-bottom: 15px;
				border-radius: 6px;
			}

			.form-view {
				margin-top: 20px;

				.form-item {
					border-bottom: 1px solid #f5f5f5;
				}
			}

			.login-title {
				display: block;
				text-align: center;
				color: #121212;
				font-size: 22px;
				letter-spacing: 2px;
			}

			.login_but {
				width: 100%;
				letter-spacing: 4px;
				font-size: 17px;
				opacity: 0.85;
			}

			.password-box {
				font-size: 13px;
				color: #b1b1b1;
				margin-bottom: 20px;
				display: flex;
				align-items: center;

				.remember-password {
					flex: 1;
					cursor: pointer;
					user-select: none;
				}

				.forget-password {
					flex: 1;
					text-align: right;
					cursor: pointer;
					user-select: none;

					&:active {
						color: #3a6ffd;
					}
				}
			}

			.tips {
				color: #b1b1b1;
			}

			.login-bottom {
				width: 100%;
				position: fixed;
				bottom: 40px;
				color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 0 60px;
				box-sizing: border-box;
				align-items: center;

				.left {
					text-align: right;
				}

				.middle {
					text-align: center;
					letter-spacing: 6px;
					flex: 1;
				}
			}

			.btns-box {
				font-size: 13px;
				color: #b1b1b1;
				padding-top: 25px;
				display: flex;
				box-sizing: border-box;

				text {
					cursor: pointer;

					&:first-of-type {
						flex: 1;
					}

					&:nth-of-type(2) {
						margin-right: 8px;
					}
				}

				.register {
					color: rgba(58, 98, 215, 1);
				}
			}
		}
	}
</style>
